<template>
  <div class="page">
		<van-nav-bar 
			:fixed="true" 
			:placeholder="true"
			:border="false"
			:title="title"
			class="bar"
		></van-nav-bar>
		<!-- 页面内容 -->
		<div class="content">
			<div class="nav">
				<van-search @click="$router.togo('/search')" shape="round" placeholder="请输入商品名"></van-search>
			</div>
			
			<div class="c_t">
				<div class="c_tips">
					<div><span>今日必拼</span></div>
				</div>
				<div class="count_down">
					<span class="text">距离本场结束 ：</span>
					<van-count-down :time="time">
						<template #default="timeData">
							<span class="block">{{ timeData.hours }}</span>
							<span class="colon">:</span>
							<span class="block">{{ timeData.minutes }}</span>
							<span class="colon">:</span>
							<span class="block">{{ timeData.seconds }}</span>
						</template>
					</van-count-down>
				</div>	
				
				<div class="comm_list">
					<ul @click="$router.togo('/hot_comm')">
						<li v-for="(item, index) in kill_comm" :key="index" >
							<img :src="require('../assets/images/' + item.img)" alt="">
							<div class="mess">
								<div class="title">{{item.title}}</div>
								<div class="price">
									<span>¥ {{item.price}}</span>
									<del>¥ {{item.o_price}}</del>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			
			<div class="c_b">
				<div class="c_tips">
					<div><span>推荐商品</span></div>
				</div>
				
				<div class="comm">
					<ul>
						<li 
							v-for="(item, index) in comm_list" 
							:key="index"
							@click="$router.togo('/comm_detail', {data: item})"
						>
							<div class="l">
								<img :src="require('../assets/images/' + item.img)" alt="">
							</div>
							<div class="c">
								<div class="title">{{item.title}}</div>
								<div class="tag">{{item.tag}}</div>
								<div class="b">
									<div class="price">
										<span>¥ {{item.price}}</span>
										<del>¥ {{item.o_price}}</del>
									</div>
									<div class="r">已售{{item.sold}}份</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>

export default {
  data () {
		return {
			title: 'YG商城',
			time: 5 * 30 * 60 * 1000,
			timeData: {
				hours: 5,
				minutes: 30,
				seconds: 0
			},
			kill_comm: [
				{
					id: 1,
					title: '高档名牌包',
					price: 469,
					o_price: 578,
					img: 'img1.png'
				},
				{
					id: 1,
					title: '女神单肩包迷你款可爱萌娃款式',
					price: 329,
					o_price: 198,
					img: 'img2.png'
				},
				{
					id: 3,
					title: '最新款女神必备长裤粉色',
					price: 288,
					o_price: 319,
					img: 'img3.png'
				},
			],
			comm_list: [
				{
					id: 1,
					title: '最新款女神必备长裤粉色潮流时尚可爱款式',
					img: 'img1.png',
					tag: '华侨城服装大厦',
					price: 299,
					o_price: 368,
					sold: 356
				},
				{
					id: 2,
					title: '女神单肩包迷你款可爱萌娃款式',
					img: 'img2.png',
					tag: 'IN CHINE国际大厦',
					price: 299,
					o_price: 368,
					sold: 356
				},
				{
					id: 3,
					title: '女神单肩包迷你款可爱萌娃款式',
					img: 'img3.png',
					tag: 'IN CHINE国际大厦',
					price: 186,
					o_price: 368,
					sold: 356
				},
				{
					id: 4,
					title: '女神单肩包迷你款可爱萌娃款式',
					img: 'img1.png',
					tag: 'IN CHINE国际大厦',
					price: 279,
					o_price: 368,
					sold: 356
				},
				{
					id: 5,
					title: '最新款女神必备长裤粉色',
					img: 'img2.png',
					tag: '华侨城服装大厦',
					price: 299,
					o_price: 368,
					sold: 356
				},
			]
		}
	},
	methods:{
	},
	mounted () {
	}
};
</script>

<style lang="scss" scoped>
	@import '~styles/theme';
	@mixin border_len {
		content: '';
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 26px;
		height: 1px;
		border-radius: 2px;
		background-color: #ccc;
	}
	.page::v-deep .van-nav-bar{
		background-color: $theme_color;
	}
	/deep/ .van-nav-bar__title{
		color: #fff;
	}
	.content{
		.van-search{
			background-color: $theme_color;
		}
		.c_tips{
			div{
				border-bottom: 1px #eee solid;
				padding: 16px 0;
				margin: 0;
				span{
					font-size: 16px;
					font-weight: bold;
					position: relative;
					&::after{
						@include border_len;
						left: -40px;
					}
					&::before{
						@include border_len;
						right: -40px;
					}
				}
			}
		}
		.c_t{
			background-color: #fff;
			padding-bottom: 10px;
			margin-bottom: 14px;
			.count_down{
				padding: 14px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				.text{
					color: #999;
				}
				.colon {
					display: inline-block;
					margin: 0 3px;
					color: #454545;
					font-weight: bold;
				}
				.block {
					display: inline-block;
					width: 20px;
					color: #fff;
					text-align: center;
					background-color: #454545;
					border-radius: 2px;
				}
			}
			.comm_list{
				ul{
					width: calc(100% - 16px);
					margin-left: 8px;
					display: flex;
					justify-content: space-around;
					align-items: flex-start;
					li{
						img{
							width: 109px;
							height: 109px;
							object-fit: cover;
							display: block;
						}
						.title{
							text-align: left;
							margin: 10px 0;
							width: 109px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.price{
							display: flex;
							justify-content: flex-start;
							align-items: center;
							span{
								color: $font_main_color;
								font-weight: bold;
								font-size: 16px;
								margin-right: 10px;
							}
							del{
								color: #ccc;
							}
						}
					}
				}
			}
			
		}
		
		.c_b{
			background-color: #fff;
			padding-bottom: 10px;
			.comm{
				ul{
					width: calc(100% - 25px);
					margin-left: 12.5px;
					li{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						padding: 16px 0;
						&:not(:nth-last-child(1)){
							border-bottom: 1px #eee solid;
						}
						.l{
							img{
								width: 70px;
								height: 70px;
								object-fit: cover;
								border-radius: 4px;
								margin-right: 12.5px;
								display: block;
							}
						}
						.c{
							width: 267.5px;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							align-items: flex-start;
							height: 70px;
							.title{
								text-align: left;
								width: 100%;
								font-size: 15px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							.tag{
								color: #999;
								margin-bottom: 8px;
								font-size: 12px;
							}
							.b{
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								.price{
									span{
										color: $font_main_color;
										font-weight: bold;
										font-size: 16px;
										margin-right: 10px;
									}
									del{
										color: #ccc;
									}
								}
								.r{
									font-size: 12px;
									color: #999;
								}
							}
						}
					}
				}
			}
		}
		
	}
</style>